<template>
    <inner-layout v-loading="loading">

        <div class="filter-bar clearfix">
            <div class="filter-item">
                <i class="el-icon-info"></i> 共{{ dataList.length }}个商品行情数据；
                <template v-for="item in summaryList">
                    <span :key="item.rate">【波动大于{{item.rate}}%的有{{item.total}}个】</span>
                </template>
            </div>

            <div class="filter-item">
                <el-button :disabled="loading" @click="filterData">刷新</el-button>
            </div>
        </div>


        <div class="list-wrap">
            <el-table :data="dataList" :default-sort = "{prop: 'chgRate', order: 'descending'}" stripe style="width:100%">
                <!-- <el-table-column
                    prop="symbol"
                    label="代码">
                </el-table-column> -->
                <el-table-column label="代码">
                    <template slot-scope="scope">
                        <a :href="`https://finance.sina.com.cn/futures/quotes/`+scope.row.symbol+`0.shtml`" target="_blank">{{ scope.row.symbol }}</a>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="name"
                    label="名称">
                </el-table-column>
                <el-table-column
                    prop="current"
                    label="价格">
                </el-table-column>
                <el-table-column
                    prop="yesterdayPrice"
                    label="昨结算">
                </el-table-column>
                <el-table-column
                    prop="chgRate"
                    label="涨跌幅%"
                    sortable>
                </el-table-column>
            </el-table>
        </div>


        <div class="tip-wrap">
            <div><i class="el-icon-info"></i>商品期货数据来源：新浪</div>
            <div class="fr">
                <a href="http://vip.stock.finance.sina.com.cn/quotes_service/view/qihuohangqing.html#titlePos_0" target="_blank">去新浪查看详情&gt;&gt;</a>
            </div>
        </div>
    </inner-layout>
</template>

<script>
import { getSinaQuote, praseSinaJsStr } from '@/api/sina'
import { futuresSymbolList } from '@/config'
export default {
	name: 'CommodityFutures',
	components: { },
    directives: { },
	mixins: [],
	data() {
		return {
			loading: false,
            futuresSymbolList: {},
			dataList: [],
            summaryList: [{"rate": 8, "total": 0},{"rate": 5, "total": 0},{"rate": 3, "total": 0}],
		}
	},
	created() {
        this.futuresSymbolList = futuresSymbolList()
		this.getPageData()
	},
	methods: {
		getPageData() {
            let that = this

            that.dataList = []
            let _symbols = []
			Object.keys(that.futuresSymbolList).forEach(k => {
                _symbols.push('nf_' + k + '0')
            })
            that.getFuturesData(_symbols)
		},
        getFuturesData(symbol) {
            let that = this

            that.loading = true
            symbol = symbol || []
            if (symbol.length > 0) {
                getSinaQuote(symbol.join(',')).then(res2 => {
                    if (res2.err_code === 0) {
                        let _jsStr = praseSinaJsStr(res2.data) || {}
                        Object.keys(_jsStr).forEach(k => {
                            let _code = k.replace(/nf_/g, '').replace(/0/g, '')
                            let _price = _jsStr[k][8] * 1
                            let _yesterdayPrice = _jsStr[k][10] * 1
                            let _row = {
                                symbol: _code,
                                name: that.futuresSymbolList[_code],
                                current: _price,
                                yesterdayPrice: _yesterdayPrice,
                                chgRate: (_yesterdayPrice ? ((_price - _yesterdayPrice) / _yesterdayPrice * 100).toFixed(2) : 0) * 1
                            }
                            that.dataList.push(_row)

                            for (let _inx = 0; _inx < that.summaryList.length; _inx++) {
                                if (Math.abs(_row.chgRate) >= that.summaryList[_inx].rate) {
                                    that.summaryList[_inx].total++
                                    break;
                                }
                            }
                        })
                        // that.dataList = that.dataList.sort(function(a, b){return b.chgRate - a.chgRate})
                        console.log('getSinaQuote', that.dataList, that.summaryList)
                    }
                }).finally(() => {
                    console.info('getSinaQuote--finally() is executing!');
                    that.loading = false
                })
            }
        },
        filterData() {
            this.getPageData()
        }
	}
}
</script>

<style lang="scss" scoped>
    .list-wrap {
        margin-top: 30px;
    }
    .tip-wrap {
        padding: 30px 0;
        font-size: 13px;
        line-height: 26px;
    }
</style>
